

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TextInput,
  Platform,
  TouchableOpacity,
  View,
  Image,
  ScrollView,
  Modal
} from 'react-native';
import Head from './head.js';
import ImageViewer from 'react-native-transformable-image';
var Dimensions = require('Dimensions');
var ScreenWidth = Dimensions.get('window').width;
var ScreenHeight = Dimensions.get('window').height;
let _this;
export default class queryCustDetail extends Component {
  constructor(props) {
    super(props);
    _this = this;
    this.state={
      imgpath1:"",
      imgpath2:"",
      show:false,
      SendInfo:this.props.SendInfo
    };
    
  }
  
  // componentDidMount(){
  //   storage.load({
  //       key: global.userid+this.props.SendInfo.card+'loginState',
  //     }).then(ret => {
  //         // console.warn(ret.ImagePickerOne);
  //         // console.warn(ret.ImagePickerTwo);
  //         this.setState({
  //           imgpath1:{uri :ret.ImagePickerOne},
  //           imgpath2:{uri :ret.ImagePickerTwo}
  //         });
  //         // console.warn(console.warn(this.state.imgpath1.uri));
  //         // console.warn(console.warn(this.state.imgpath2.uri));
  //     }).catch(err => {
          
  //         // console.warn(err.message);
       
  //     });
  //    /* let source1={uri:'https://www.baidu.com/img/bd_logo1.png'};
  //     console.warn(source1.uri);*/
  //     /*this.setState({
  //         imgpath1:source1,
  //         imgpath2:source1,
  //       });*/

  // }

    _Modalhidden(){
        this.setState({
            show:false
        });
    }
  render() {
    return (
    <View style={styles.container}>
          <View style={styles.title}>
              <Head displayLeft={true}  _onLeftPress={()=>this.props.navigator.pop()} title='已调查'></Head>
          </View>
          <View  style={{}}>
              <ScrollView>
                  <View style={styles.detailStyle}>
                      <Text style={styles.inputTextStyle}>客户姓名：</Text>
                      <Text style={styles.inputTextStyle}>{this.state.SendInfo.name}</Text>
                  </View>
                  <View style={styles.detailStyle}>
                      <Text style={styles.inputTextStyle}>身份证号：</Text>
                      <Text style={styles.inputTextStyle}>{this.state.SendInfo.card}</Text>
                  </View>
                  <View style={styles.detailStyle}>
                      <Text style={styles.inputTextStyle}>调查地址：</Text>
                      <Text style={styles.inputTextStyle}>{this.state.SendInfo.location}</Text>
                  </View>
                    
                  <View style = {{flexDirection:'row'}}> 
                        <TouchableOpacity onPress = {() =>  {this.setState({show:true})}}>
                            
                            <Image
                              style = {[styles.icon,{marginLeft:10,marginRight:10}]}
                              source={require('./../images/testImg.jpg')}
                            />
                        </TouchableOpacity>
                        <TouchableOpacity onPress = {() =>  {this.setState({show:true})}}>
                           
                            <Image
                              style = {styles.icon}
                              source={require('./../images/testImg.jpg')}
                            />
                        </TouchableOpacity>  
                  </View>


                  <Modal
                      animationType={'slide'}
                      transparent={true}
                      visible={this.state.show}>
                      <TouchableOpacity 
                          style={styles.ImageView}
                          activeOpacity={1}
                          onPress={() => this._Modalhidden()}
                          // 需要加一个透明度，因为和 ImageViewer 是父子级包含关系，会导致双指的点击事件冲突（TouchableOpacity双指会透明）
                          >
                          <ImageViewer
                              style={{height: ((ScreenWidth-20)/ ScreenWidth * ScreenHeight), width:ScreenWidth,}}
                              source={require('./../images/testImg.jpg')}
                              />
                              <TouchableOpacity onPress={() => this._Modalhidden()} style={{height:30,width:30,position:'absolute',top:20,right:5}}>
                                  <Image
                                      style={{height: 30, width: 30}}
                                      source={require('../images/close.png')}/>
                              </TouchableOpacity>
                              
                      </TouchableOpacity>
                  </Modal>
                </ScrollView>
          </View>
     </View> 
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  ImageView:{
    backgroundColor:'#000000ee',
    alignItems: 'center',  
    justifyContent:'center',  
    flex:1,
  },
  icon: {
    width:(ScreenWidth-30)/2,
    height:((ScreenWidth-30)/2) /ScreenWidth * ScreenHeight,
    marginTop:10,
    borderRadius:5
  },
  title: {
    height:60,
  },
  inputTextStyle: {
    fontSize: 16,
    color:'#666666'
  },
  TextInput: {
    width: 240,
    height: 30,
    marginTop: 10,
    borderRadius: 5,
  },
  detailStyle:{
    flexDirection: 'row',
    borderColor:'#ccc',
    borderBottomWidth:1,
    paddingLeft:20,
    height:45,
    alignItems:'center',
    marginRight:20
  },
  textLoginStyle:{
    backgroundColor: '#12b7f5',
  }
});